<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="72px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="工序" prop="name">
            <el-input v-model="form.name" placeholder="" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="期数" prop="qsId">
            <el-select v-model="form.qsId" placeholder="请选择期数" @change="qsChange" style="width: 100%;">
              <el-option v-for="item in qsOptions" :key="item.qsId" :label="item.settleName"
                :value="item.qsId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="施工时间" prop="constructionTime">
            <el-date-picker clearable v-model="form.constructionTime" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择日期" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="报验时间" prop="inspectTime">
            <el-date-picker clearable v-model="form.inspectTime" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择日期" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinions">
        <el-input v-model="form.approvalOpinions" placeholder="" disabled />
      </el-form-item>
      <div class="cd-ml8 cd-mb8 cd-text-md text-bold">需上传的资料列表</div>
      <el-table class="cd-mb8" border stripe v-loading="loading" :data="form.infoList">
        <el-table-column label="序号" align="center" width="50px" type="index" />
        <el-table-column label="资料名称" align="center" property="name" min-width="140" show-overflow-tooltip />
        <el-table-column label="文件" header-align="center" property="fileName" min-width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="file-border pointer theme-color" v-for="(item, index) in scope.row.sysOssVos" :key="index"
              @click="previewFile(item)">
              <span class="el-icon-document cd-mr4"></span>
              <span class="pointer theme-color">{{ item.originalName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上传时间" align="center" property="updateTime" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="上传人" align="center" property="updateBy" width="90" show-overflow-tooltip />
        <el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="onListUpLoad(scope.$index)" :disabled="!btnShow">上传</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="附件" prop="fileNo">
        <fileUpload :disabled="!btnShow || !canOperation()" v-model="form.fileNo" :oldList="form.fileNoOld" :fileType="['doc', 'docx', 'xlsx', 'xls'
          , 'pdf', 'png', 'jpg', 'jpeg']" />
      </el-form-item>

    </el-form>
    <div class="dialog-footer top-right-btn" v-if="btnShow">
      <el-button v-show="(this.form.approveStatus && this.form.approveStatus != '00')" :loading="buttonLoading"
        type="primary" size="mini" @click="onToReportDetail()">审批详情</el-button>
      <el-button :loading="buttonLoading" type="primary" size="mini" @click="onToReportForm()">报表审批进度</el-button>
      <el-button :disabled="!canOperation()" :loading="buttonLoading" type="primary" size="mini"
        @click="submitForm()">保存</el-button>
      <el-button :disabled="!canOperation()" :loading="buttonLoading" type="primary" plain size="mini"
        @click="submitForm(1)">提交</el-button>
      <el-button :disabled="!canOperation()" :loading="buttonLoading" type="danger" plain size="mini"
        @click="onDel">删除工序</el-button>
    </div>
    <file-upload-model-view ref="fileUploadModelViewRef" @callBack="setFile" />
  </div>
</template>
<script>
import { getBsProcessInspection, updateBsProcessInspection } from "@/api/pl/bsProcessInspection";
import { queryQsList } from "@/api/cm/bsQs";
import FileUploadModelView from '@/components/FileUpload/FileUploadModelView.vue';

export default {
  name: 'gxby-add-or-update',
  components: {
    FileUploadModelView,
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    btnShow: {
      type: [Boolean],
      default: true
    },
    selectGxActive: {
      type: [Number],
      default: 0
    }
  },
  data () {
    return {
      open: false,
      title: '工序报验资料管理',
      loading: false,
      buttonLoading: false,
      qsOptions: [],
      form: {},
      rules: {
        qsId: [
          { required: true, message: "对应期数不能为空", trigger: "blur" }
        ],
        constructionTime: [
          { required: true, message: "报验时间不能为空", trigger: "blur" }
        ],
        inspectTime: [
          { required: true, message: "报验时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    id: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.init(newVal);
        }
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (id) {
      this.reset();
      this.open = true;
      this.form.id = id;
      this.getInfo();
    },
    getInfo () {
      this.loading = true;
      getBsProcessInspection(this.form.id).then(response => {
        this.loading = false;
        this.form = response.data;
        if (this.form.fileNo) {
          this.form.fileNoOld = this.form.fileNo.split(',');
        }
        if (this.form.infoList && this.form.infoList.length > 0) {
          this.form.infoList.forEach(item => {
            if (item.fileNo) {
              item.fileNoOld = item.fileNo.split(',');
            }
          });
        }

        this.getQs();
      });
    },
    // 获取期数下拉
    getQs () {
      const queryParams = {
        zdId: this.form.zdId,
      };
      queryQsList(queryParams).then(response => {
        this.qsOptions = response.data;
      });
    },
    qsChange () {
      const info = this.qsOptions.find(item => item.qsId == this.form.qsId);
      this.form.qs = info.settleIndex;
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        approveStatus: undefined,
        enabled: undefined,
        fbfxId: undefined,
        fileType: undefined,
        id: undefined,
        infoList: [],
        constructionTime: undefined,
        inspectTime: undefined,
        name: undefined,
        processId: undefined,
        qs: undefined,
        qsId: undefined,
        remark: undefined,
        sort: undefined,
        zdId: undefined,
        fileNo: undefined,
        fileNos: [],
        fileNoOld: [],
      };
      this.dataList = [];
      this.selectedData = [];
    },
    onListUpLoad (index) {
      const info = this.form.infoList[index];
      this.$refs.fileUploadModelViewRef.init(index, info.fileNo, info.fileNoOld);
    },
    setFile (index, fileId) {
      this.form.infoList[index].fileNo = fileId;
    },
    // 下载
    async download (row) {
      this.$download.oss(row.ossId);
    },
    /** 提交按钮 */
    submitForm (isExamine) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.infoList.forEach(item => {
            if (item.fileNo) {
              item.fileNos = item.fileNo.split(',');
            }
          });
          if (this.form.fileNo) {
            this.form.fileNos = this.form.fileNo.split(',');
          }
          this.buttonLoading = true;
          updateBsProcessInspection(this.form).then(response => {
            if (isExamine) {
              this.onExamine();
            } else {
              this.$modal.msgSuccess("保存成功");
              // this.cancel();
              this.$emit('callBack');
            }
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
    // 是否可操作
    canOperation () {
      return this.form.approveStatus == '00' || this.form.approveStatus == '33';
    },
    onExamine () {
      this.$emit('onExamine', this.form);
    },
    onDel () {
      this.$emit('onDel', this.form);
    },
    // 跳转 审批进度
    onToReportForm () {
      if (!this.form.qsId) {
        this.$message.warning("请选择期数！");
        return;
      };
      this.$router.push({
        path: '/cm/reportForm',
        query: {
          projectId: this.form.projectId,// "1855777111119319041",
          bdId: this.form.bdId,//'1856236267613716481',
          qsId: this.form.qsId
        }
      });
    },
    // 审批详情
    onToReportDetail () {
      const info = this.form;
      if (!info.procInsId) {
        this.$message.warning("流程信息不存在！");
        return;
      }
      const processed = this.form.approveStatus == '11' && info.currApproval;
      this.$router.push({
        path: '/workflow/process/detail/' + info.procInsId,
        query: {
          taskId: info.taskId,
          processed: processed
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.file-border {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  /* 隐藏超出的内容 */
  white-space: nowrap;
  /* 不换行 */
  text-overflow: ellipsis;
}
</style>
